<template>
	<view>
		<view style="box-sizing: border-box;padding: 20rpx;" v-if="loading">
			<ls-skeleton :skeleton="skeleton" :loading="loading"></ls-skeleton>
		</view>
		<Waterfall  ref="WaterfallRef" v-show="!loading" @statusChange="getStatusChange(e)">
			<template v-slot:default="{ list, colWidth }">
				<view style="display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 10rpx;">
					<waterfall-col v-for="(colItem,colIndex) in list" :key="colIndex" :colWidth="colWidth" class="ss">

						<waterfall-item v-for="(item,index) in colItem" :key="item.id" :colIndex="colIndex" v-if="dids.indexOf(item.id)==-1 ">
							<view class="content" @click="toDetail(item.id)" :data-col_index="colIndex"
								:data-item_index="index">
								<!-- <template v-if="$getIsImage(item.img) === 1">
									//图片
								</template> -->
								<view class="video"
									v-if="(item.upload.length > 0 ? $getIsImage(item.upload[0]) === 2 : false) && item.__waterfall_IS_IMAGE"
									:style="{height:item.__waterfall_imageHeight + 'rpx'}">
									<image mode="scaleToFill" :src="item.img"></image>
									<view class="play">
										<uni-icons custom-prefix="iconfont" type="icon-bofang" size="15"
											color="rgba(255,255,255,1)"
											style="transform: translateX(4rpx);"></uni-icons>
									</view>
								</view>
								<view class="image" :style="{height:item.__waterfall_imageHeight + 'rpx'}"
									v-else-if="item.__waterfall_IS_IMAGE && item.__waterfall_imageHeight > 0">
									<image :src="item.img" mode="widthFix">
										<!-- 必须给图片的高度这事为 __waterfall_imageHeight px属性的高 -->
									</image>
								</view>

								<view class="content-tx" :style="{height:item.__waterfall_imageHeight + 'rpx'}"
									v-if="item.__waterfall_IS_IMAGE === false">
									<view class="list-item-content">
										<rich-text :nodes="replaceEmoji(item.content)"></rich-text>
									</view>
								</view>
								<view class="tag" v-if="item.state == 1">置顶</view>
								<view class="tag" v-else-if="item.reservation != ''">活动</view>

								<view class="info">
									<view class="title" v-if="item.__waterfall_IS_IMAGE">{{ item.content }}</view>
									<view class="flex-row-between">
										<!-- <image :src="item.user.head" class="avatar" @click.stop="toOhter(item.business_card_id)"/> -->
										<view class="avatar" @click.stop="toOhter(item.business_card_id)">
											<identityAvatarVue :identity="item.circle_host" :avatar="item.user.head" />
										</view>

										<view class="nickname">{{ item.user.nickname }}</view>
										<view class="flex-row">
											<view class="flex-row" @click.stop="likeRquest(colIndex, index)">
												<uni-icons custom-prefix="iconfont"
													:type="item.like_type  == 1 ? 'icon-aixin' : 'icon-taoxin' "
													size="15"
													:color="item.like_type  == 1 ? '#e4393c' : ''"></uni-icons>
												<text style="margin-left: 5rpx;"> {{item.like_count}} </text>
											</view>
											<view @click.stop v-if="circleId > 0">

												<picker mode="selector" :range="range" @change="e => change(e, item)"
													range-key="label">
													<view v-if="circleInfo.judge === '1' || circleInfo.is_admin === 1"
														style="margin-left: 10rpx;">
														管理
														<uni-icons custom-prefix="iconfont" type="icon-sanjiaoxing"
															size="12"></uni-icons>
													</view>

												</picker>
											</view>

										</view>
									</view>
								</view>
							</view>
						</waterfall-item>
					</waterfall-col>
				</view>

			</template>
		</Waterfall>
	</view>
</template>

<script>
	import lsSkeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import videoVue from '@/components/video/video.vue';
	import {
		InformationCircleList,
		InformationApplication,
		InformationCancellation,
		InformationLike,
		i_joined_circle_list,
		circle_recently,
		recently_visited_circle,
		circle_host_zhiding,
		circle_setTopPost,
		circle_deleteLog,
		InformationLogDetails
	} from '@/common/http/api.js'
	// 瀑布流组件
	import Waterfall from "../../waterfall/waterfall-list";
	import WaterfallCol from "../../waterfall/waterfall-col";
	import WaterfallItem from "../../waterfall/waterfall-item";
	import identityAvatarVue from '@/components/identity-avatar/identity-avatar.vue';
	
	import list from '../../../../uni_modules/uview-ui/libs/config/props/list';
	
	export default {
		components: {
			Waterfall,
			WaterfallCol,
			WaterfallItem,
			lsSkeleton,
			videoVue,
			identityAvatarVue
		},
		props: {
			circleInfo: {
				type: Object,
				default: {}
			},
			dids: {
				type: Array,
				default:[]
			},
			circleId: {
				type: Number,
				default: () => 0
			}
		},
		data() {

			return {
				loading: true,
				skeleton: [
					'news',
					'news',
					'news',
					'news',
					'news',
				],
				range: [{
						label: '置顶',
						value: 0
					},
					{
						label: '删除',
						value: 1
					}
				]
			}
		},
		mounted() {

		},
	watch: {
		// 开始loading时，加载动画
		dids(val) {
			console.log(val)
		}
	},
		methods: {
			toOhter(id) {
				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + id
				})
			},
			/**
			 * 分页
			 * @param {Object} list
			 */


			render(list) {
			
				this.$refs.WaterfallRef.render(list)
			},
			reload() {
				this.$refs.WaterfallRef.reload()
			},




			getStatusChange(e) {


				this.loading = false
			},
			/**
			 * 功能
			 */
			//
			change(e, item) {

				let {
					value
				} = this.range[e.detail.value]

				switch (value) {
					case 0:
						//置顶
						circle_host_zhiding({
							circle_id: this.circleId
						}).then(res => {
							wx.showModal({
								title: `剩余置顶天数(${res.data.remaining_days}天)`,
								editable: true, // 允许输入
								placeholderText: '置顶（）天', // 输入框提示
								success: res => {
									if (res.confirm) {

										if (res.content ? Number(res.content) > 0 : false) {
											circle_setTopPost({
												circle_id: this.circleId,
												log_id: item.id,
												days: Number(res.content)
											}).then(res => {
												this.$u.toast('设置成功！')
											})
										} else {
											this.$u.toast('请输入正确的置顶天数！')
										}
									} else if (res.cancel) {

									}
								}
							})
						})
						break;
					case 1:
						uni.showLoading({
							mask: true,
							title: '删除中'
						})
						circle_deleteLog({
							circle_id: this.circleId,
							log_id: item.id
						}).then(res => {
							this.$emit('reload')
							uni.hideLoading()
							this.$u.toast('删除成功')
						})
						break;
					default:
						break;
				}
			},
			getIsUpload(url) {
				if (!url) return false
				return url.includes('?x-oss-process=video/snapshot,t_0,f_jpg,w_360')
			},
			likeRquest(colIndex, index) {

				let it = this.$refs.WaterfallRef.renderList[colIndex][index]

				//uni.showLoading()
				InformationLike({
					id: it.id
				}).then(res => {
					//this.reload()

					if (it.like_type === 1) {
						it.like_type = 2
						if (it.like_count > 0) {
							it.like_count--
						}
					} else {
						it.like_type = 1
						it.like_count++
					}
				})
			},
			toDetail(id) {
				uni.showLoading()
				InformationLogDetails({
					id,
					page: 1
				}).then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/circle/detail?id=' + id
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-shadow: #999 0rpx 0rpx 1rpx;
		border-radius: 20rpx;
		position: relative;

		.tag {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			z-index: 99;
			background: rgba(0, 0, 0, 0.4);
			font-size: 20rpx;
			color: white;
			padding: 9rpx 20rpx;
			border-radius: 10rpx;
		}

		.image {
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				border-radius: 20rpx;
				width: 100%;
			}
		}

		.content-tx {
			width: 100%;
			background: #F7F7F9;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx;
			overflow: hidden;

			view {
				font-size: 24rpx;
				color: #333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				width: 100%;
				height: 100%;
				overflow: hidden;
				letter-spacing: 1rpx;
				line-height: 33rpx;
				word-wrap: break-word;
				word-break: break-all;
			}
		}

		.info {
			padding: 10rpx 20rpx;
			font-size: 20rpx;

			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.xin {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}
		}

		.title {
			font-size: 28rpx;
			color: #333;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.price {
			color: #e4393c;
			font-size: 32rpx;
			margin-top: 10rpx;
			display: block;
		}

		.loading,
		.no-more {
			width: 100%;
			text-align: center;
			padding: 30rpx;
			color: #999;
		}
	}

	.nickname {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 5rpx;
	}

	.video {
		width: 100%;
		position: relative;

		&>image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.play {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			z-index: 2;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}
</style>